var menu;
var id;
var vm =new Vue({
    el: "#vueBox",
    data:{
        name:window.name,
        url:window.url,
        icon:window.icon,
        menuId:0
    },
    methods: {
        menuAddBtn: function () {
            var params = new URLSearchParams();
            params.append("name", this.name);
            params.append("url", this.url);
            params.append("pid", window.menuId);
            params.append("icon", this.icon);
            if (this.name == null || this.name == "") {
                layer.msg("请填写菜单项名称！");
                return;
            }
            if (this.url == null || this.url == "") {
                layer.msg("请填写菜单项对应的访问地址！");
                return;
            }
            axios.post("/menu/save",params).then(res => {
                if (res.data.result == "SUCCESS") {
                    layer.msg("操作成功！");
                    initWholeTree();
                }
                if (res.data.result == "FAILED") {
                    layer.msg(response.message);
                }
            })
        },
        menuEditBtn:function () {
            var params = new URLSearchParams();
            params.append("name", menu.name);
            params.append("url", menu.url);
            params.append("pid", menu.pid);
            params.append("icon", menu.icon);
            console.log(menu.name)
            axios.post("/menu/save",params).then(res => {
                if (res.data.result == "SUCCESS") {
                    layer.msg("操作成功！");
                    initWholeTree();
                }
                if (res.data.result == "FAILED") {
                    layer.msg(response.message);
                }
            })
        },
        menudeleteBtn:function () {
            var params = new URLSearchParams();
            params.append("id", id);
            console.log(id)
            axios.post("/menu/deleteMenu",params).then(res => {
                if (res.data.result == "SUCCESS") {
                    layer.msg("操作成功！");
                    initWholeTree();
                }
                if (res.data.result == "FAILED") {
                    layer.msg(response.message);
                }
            })
        }
    },
    mounted() {
        axios.post("/menu/get/whole/tree").then(res => {
            if(res.data.result == "SUCCESS") {
                // 用于显示树形结构的节点数据
                var zNodes = res.data.data;
                // 执行树形结构的初始操作
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            }
            if(res.data.result == "FAILED") {
                layer.msg("加载菜单数据失败！原因是："+res.data.message);
            }
        })
    }
})

//生成并返回按钮组
function generateBtnGrp(treeNode) {
    // 获取当前节点的id（HTML中li标签的id）
    var tid = treeNode.tId;
    // 组装按钮组所在的span的id
    var btnGrpSpanId = tid + "_btnGrp";
    // 生成span标签对应的jQuery对象
    var $span = $("<span id='" + btnGrpSpanId + "'></span>");
    // 获取当前节点在数据库中的id值
    var menuId = treeNode.id;
    // 获取当前节点的level值
    var level = treeNode.level;
    // 声明三种按钮
    var addBtn = "<a onclick='showAddModal(this)' id='" + menuId + "' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='添加子节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg'></i></a>";
    var editBtn = "<a onclick='showEditModal(this)' id='" + menuId + "' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='编辑节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-edit rbg'></i></a>";
    var removeBtn = "<a onclick='showConfirmModal(this)' id='" + menuId + "' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='删除节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg'></i></a>";
    // 根据level进行判断
    if (level == 0) {
        $span.append(addBtn);
    }
    if (level == 1) {
        if (treeNode.children.length > 0) {
            $span.append(addBtn + " " + editBtn);
        } else {
            $span.append(addBtn + " " + editBtn + " " + removeBtn);
        }
    }
    if (level == 2) {
        $span.append(editBtn + " " + removeBtn);
    }
    return $span;
}

function showConfirmModal(currentBtn) {
    // 打开模态框
    $("#menudeleteModal").modal("show");
    // 获取当前节点的id存入全局变量
    window.menuId = currentBtn.id;
    // 发送请求查询Menu对象
    $.ajax({
        "url":"/menu/get/"+window.menuId,
        "type":"get",
        "dataType":"json",
        "success":function(response) {
            var result = response.result;
            if(result == "SUCCESS") {
                // 从响应数据中获取Menu对象
                var menu = response.data;
                console.log(menu)
                // 获取各个属性值
                var name = menu.name;
                id=menu.id;
                // 设置各个对应的表单项
                $("#menudeleteModal [name='id']").val(id);
                $("#menudeleteModal [name='name']").val(name);
            }
            if(result == "FAILED") {
                layer.msg(response.message);
            }
        },
        "error":function(response) {
            layer.msg(response.message);
        }
    });
}

//鼠标悬浮在节点上时调用此方法
function addHoverDom(treeId, treeNode) {
    // 在执行添加前，先进行判断，如果已经添加过，就停止执行
    // 组装按钮组所在的span标签的id
    var btnGrpSpanId = treeNode.tId + "_btnGrp";
    var btnGrpSpanLength = $("#" + btnGrpSpanId).length;
    if (btnGrpSpanLength > 0) {
        return;
    }
    //获取按钮组
    var $btnGrpSpan = generateBtnGrp(treeNode);
    // 由于按钮组是放在当前节点中的超链接（a标签）后面，所以先定位到a标签
    // 按id生成规则组装a标签的id
    var anchorId = treeNode.tId + "_a";
    // 在a标签后面追加按钮组
    $("#" + anchorId).append($btnGrpSpan);
}

//鼠标移出节点时调用此方法
function removeHoverDom(treeId, treeNode) {
    // 组装按钮组所在的span标签的id
    var btnGrpSpanId = treeNode.tId + "_btnGrp";
    // 删除对应的元素
    $("#" + btnGrpSpanId).remove();
}


//添加菜单
function showAddModal(currentBtn) {
    // 打开模态框
    $("#menuAddModal").modal("show");
    // 将当前节点的id存入全局变量
    window.menuId = currentBtn.id;
}
//修改
// 在点击编辑按钮时执行这个函数，打开模态框
function showEditModal(currentBtn) {
    // 打开模态框
    $("#menuEditModal").modal("show");
    // 获取当前节点的id存入全局变量
    window.menuId = currentBtn.id;
    // 发送请求查询Menu对象
    $.ajax({
        "url":"/menu/get/"+window.menuId,
        "type":"get",
        "dataType":"json",
        "success":function(response) {
            var result = response.result;
            if(result == "SUCCESS") {
                // 从响应数据中获取Menu对象
                menu = response.data;
                // 获取各个属性值
                var name = menu.name;
                var url = menu.url;
                var icon = menu.icon;
                // 设置各个对应的表单项
                $("#menuEditModal [name='name']").val(name);
                $("#menuEditModal [name='url']").val(url);
                // radio需要让value值和后端查询到的icon一致的设置为被选中
                $("#menuEditModal [name='icon'][value='"+icon+"']").attr("checked",true);
            }
            if(result == "FAILED") {
                layer.msg(response.message);
            }
        },
        "error":function(response) {
            layer.msg(response.message);
        }
    });
}


//确定修改
$("#menuEditBtn").click(function(){

});

var setting = {
    "view": {
        "addDiyDom": showMyIcon,
        "addHoverDom": addHoverDom,
        "removeHoverDom": removeHoverDom
    },
    "data": {
        "key": {
            "url": "notExistsProperty" // 阻止点击节点后跳转
        }
    }
};


function showMyIcon(treeId, treeNode) {
    console.log(treeId);
    console.log(treeNode);
    // 获取当前节点的id
    var currentNodeId=treeNode.tId;
    // 获取新的class值用于替换
    var newClass=treeNode.icon;
    //在当前节点id之后附加“_ico”得到目标span的id
    var targetSpanId = currentNodeId + "_ico";
    $('#'+targetSpanId).removeClass().addClass(newClass).css("background","");
}